<template>
    <div class="CompanyManage">
    公司信息管理 
    <el-descriptions border contentStyle="color:#000; font-size:25px" class="margin-top" title="公司详情信息"
			:column="4" direction="vertical" :data="companyList">
			<el-descriptions-item labelStyle="color:#000; font-size:30px " label="公司名称">{{company.companyName}}
			</el-descriptions-item>
			<el-descriptions-item labelStyle="color:#000; font-size:30px "
				label="公司地址">{{company.companyAddress}}</el-descriptions-item>
			<el-descriptions-item labelStyle="color:#000; font-size:30px "
				label="公司手机号">{{company.companyPhone}}</el-descriptions-item>
			<el-descriptions-item labelStyle="color:#000; font-size:30px "
				label="公司邮箱">{{company.companyEmail}}</el-descriptions-item>
			<el-descriptions-item labelStyle="color:#000; font-size:30px " label="公司简介"
				:span="4">{{company.companyDescription}}</el-descriptions-item>
			<el-descriptions-item labelStyle="color:#000; font-size:30px " :span="2"
				label="公司图片">
				<template >
					<el-image style="width: 300px; height: 300px"
						:src="company.companyPicture"></el-image>
				</template>
				</el-descriptions-item> 
			<el-descriptions-item labelStyle="color:#000; font-size:30px " :span="2"
				label="公司二维码">
				<template >
					<el-image style="width: 300px; height: 300px"
						:src="company.companyErweiPicture"></el-image>
				</template>
				</el-descriptions-item>
		</el-descriptions>
		
		
		<el-row style="text-align: center; margin-top: 50px;">
		  
		  <el-button type="primary" @click="editcompany">修改信息</el-button>
		  
		</el-row>
		

		<!-- 新增公司和修改公司的对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="canser()">
			<el-form :model="company">
				<el-form-item label="名称" label-width="80px">
					<el-input placeholder="请输入公司名称" v-model="company.companyName"></el-input>
				</el-form-item>

				<el-form-item label="地址" label-width="80px">
					<el-input placeholder="请输入公司地址" v-model="company.companyAddress"></el-input>
				</el-form-item>
				<el-form-item label="手机号" label-width="80px">
					<el-input placeholder="请输入手机号" v-model="company.companyPhone"></el-input>
				</el-form-item>
				<el-form-item label="简介" label-width="80px">
					<el-input placeholder="请输入公司简介" v-model="company.companyDescription"></el-input>
				</el-form-item>
				<el-form-item label="邮箱" label-width="80px">
					<el-input placeholder="请输入公司邮箱" v-model="company.companyEmail"></el-input>
				</el-form-item>

				<!-- <el-form-item label="二维码" label-width="80px">
					<el-upload :action="url+'upload'" list-type="picture-card"
						:file-list="fileList" :limit="1" :on-success="handleSuccess"
						:on-preview="handlePictureCardPreview" :on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>

					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>

				<el-form-item label="图片" label-width="80px">
					<el-upload :action="url+'upload'" list-type="picture-card"
						:file-list="fileList2" :limit="1" :on-success="handleSuccess2"
						:on-preview="handlePictureCardPreview" :on-remove="handleRemove2">
						<i class="el-icon-plus"></i>
					</el-upload>

					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item> -->


				<!-- <el-form-item label="心理知识详情" label-width="80px" -->
				<!-- 富文本编辑器组件 -->
				<!-- <quill-editor v-model="heartKnow.text"></quill-editor> -->
				<!-- <el-input placeholder="请输入文章详情" v-model="heartKnow.text" ></el-input> -->
				<!-- </el-form-item> -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="canser">取 消</el-button>
				<el-button type="primary" @click="AddCompany">确 定</el-button>
			</div>
		</el-dialog>
    </div>
</template>

<script>
export default {
    
    name:"CompanyManage",
    
    data() {
			return {
				url:'',
				// 查询信息对象
				queryInfo: {
					name: '',
					address: '',
					telephone: '',
					// simplyIntroduce:'',
					email: '',
					pageNum: 1,
					pageSize: 10
				},
				title: '',
				total: 10,
				companyList: [],
				company: {
					companyId: '',
					companyName: '',
					companyAddress: '',
					companyPhone: '',
					companyDescription: '',
					companyEmail: '',
					companyPicture:'',
					companyErweiPicture:'',
					twoPicture: '',
					picture: ''
				},
				twoPicture:'',
				picture:'',
				dialogImageUrl: '', //预览图片路径
				dialogFormVisible: false,
				dialogVisible: false, //预览图片对话框//预览图片对话框
				fileList: [], //点击修改时，图片预览效果
				fileList2: [],
				multipleSelection: []

			}
		},
		created(){
			this.$http.request('company/select', {
						// params: this.queryInfo
					})
					.then((resp) => {
							console.log(resp.data[0])
							this.company = resp.data[0];
							console.log(this.company)
							// this.total = resp.data.data.total;
							// // console.log(this.articleList)
							// this.twoPicture = this.company.twoPicture;
							// this.picture = this.company.picture;
					}).catch((err)=>{

					})
			},
		// mounted() {
		// 	this.queryList();
		// 	this.url = url;
		// },
		methods: {

		// 	removeBath() {
		// 		let ids = [];
		// 		for (let i = 0; i < this.multipleSelection.length; i++) {
		// 			ids[i] = this.multipleSelection[i].id
		// 		}
		// 		if (ids.length > 0) {
		// 			this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
		// 				confirmButtonText: '确定',
		// 				cancelButtonText: '取消',
		// 				type: 'warning',
		// 			}).then(() => {
		// 				this.$http.delete('company/removeBatch?ids=' + ids)
		// 					.then(resp => {
		// 						if (resp.data.status == 200) {
		// 							this.$message.success(resp.data.message);
		// 							this.queryList();
		// 						} else {
		// 							this.$message.error('删除失败');
		// 						}
		// 					})
		// 			}).catch(() => {
		// 				this.$message({
		// 					type: 'info',
		// 					message: '已取消删除'
		// 				});
		// 			})
		// 		} else {
		// 			this.$message.info("请选择要删除的公司！")
		// 		}
		// 	},

		// 	// 删除图片
		// 	handleRemove(file, fileList) {
		// 		console.log(file, fileList);
		// 		// 移除数据
		// 		this.company.twoPicture = null;
		// 	},
		// 	// 删除图片
		// 	handleRemove2(file, fileList) {
		// 		console.log(file, fileList);
		// 		// 移除数据
		// 		this.company.picture = null;
		// 	},
		// 	// 预览图片
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},


			// 取消方法
			canser() {
				this.dialogFormVisible = false;
				this.queryList()

			},


		// 	// 处理二维码上传成功后的函数
		// 	handleSuccess(response) {
		// 		console.log(response);
		// 		this.company.twoPicture = response.message;

		// 	},
		// 	// 处理图片上传成功后的函数
		// 	handleSuccess2(response) {
		// 		console.log(response);
		// 		this.company.picture = response.message;
		// 	},
		// 	// 修改方法
			editcompany(row) {
				console.log(row)
				// this.company = row;
				this.title = '修改公司信息';
				this.dialogFormVisible = true;
				// this.fileList = [{
				// 	name: row.twoPicture,
				// 	url: url+'yuLan?filename=' + this.twoPicture
				// }];
				// this.fileList2 = [{
				// 	name: row.picture,
				// 	url: url+'yuLan?filename=' + this.picture
				// }];
			},

		// 	// 添加方法
			AddCompany() {
				//修改
					this.$http.post("company/edit", this.company)
						.then((resp) => {
							console.log(this.company)
							// if (resp.data.status == 200) {
							// 	this.$message.success("修改成功！")
							// 	//清空数据
							// 	this.canser();
								//关闭对话框
								this.dialogFormVisible = false;
								//重新查询
								this.queryList();
								// 清空图片预览信息
								this.fileList = [];


							// } else {
							// 	this.$message.error("接口异常！")
							// }
						}).catch((err=>{

						}))
				

			},

		// 	// 分页查询信息的方法
			queryList() {
				// 调用后端接口来获取数据
				this.$http.get('company/select', {
			// 			params: this.queryInfo
					})
					.then(resp => {
			// 			if (resp.data.status == 200) {
			// 				console.log(resp.data)
							this.company = resp.data[0];
			// 				this.total = resp.data.data.total;
			// 				// console.log(this.articleList)
			// 				this.twoPicture = this.company.twoPicture;
			// 				this.picture = this.company.picture;
			// 			} else {
			// 				this.$message.error('查询失败！')
			// 			}
					}).catch((err)=>{

					})
			},

		// 	// 每页显示数量发生改变
		// 	handleSizeChange(size) {
		// 		//console.log('每页显示数量发生改变');
		// 		this.queryInfo.pageSize = size;
		// 		this.queryInfo.pageNum = 1;
		// 		// 重新查询
		// 		this.queryList()
		// 	},
		// 	// 页码发生改变
		// 	handleCurrentChange(num) {
		// 		//console.log('页码发生改变');
		// 		this.queryInfo.pageNum = num;
		// 		// 重新查询
		// 		this.queryList();
		// 	}

		}
    
}
</script>

<style scoped>
.el-breadcrumb {
		margin-bottom: 15px;
		padding: 0 0 15px;
		border-bottom: 1px solid #ddd;
	}

	.el-pagination {
		margin-top: 15px;
	}

	.el-link {
		padding: 0 5px;
	}

	.ql-container {
		min-height: 200px;
	}


</style>